<template>
  <a-button-group class="j-table-operator">
    <a-button type="primary" @click="setDisabled(0)">启用</a-button>
    <a-button type="primary" @click="setDisabled(1)">禁用</a-button>
    <a-button type="primary" @click="showUploadModal">文件弹窗</a-button>
  </a-button-group>
  <BasicForm @register="register" @submit="handleSubmit"/>
  <JUploadModal v-model:value="uploadModalValue" @register="registerModel"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormSchema, useForm, BasicForm } from '/@/components/Form'
import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload'
import { JUploadModal } from '/@/components/Form/src/jeecg/components/JUpload'
import { useModal } from '/@/components/Modal'

const uploadModalValue = ref('')

const schemas: FormSchema[] = [
  {
    field: 'uploadFile',
    component: 'JUpload',
    helpMessage: '无限制上传',
    label: '上传文件',
  },
  {
    field: 'uploadFileMax',
    component: 'JUpload',
    helpMessage: '最多上传3个文件',
    label: '上传文件（3）',
    componentProps: { maxCount: 3 },
  },
  {
    field: 'uploadImage',
    component: 'JUpload',
    label: '上传图片',
    helpMessage: '无限制上传',
    componentProps: {
      fileType: UploadTypeEnum.image,
    },
  },
  {
    field: 'uploadImageMax',
    component: 'JUpload',
    label: '上传图片（1）',
    helpMessage: '最多上传1张图片',
    componentProps: {
      fileType: UploadTypeEnum.image,
      maxCount: 1,
    },
  },
]

const [registerModel, { openModal }] = useModal()

const [register, { setProps, validate, setFieldsValue }] = useForm({
  labelWidth: 120,
  schemas: schemas,
  actionColOptions: {
    span: 24,
  },
  compact: true,
  showResetButton:false,
  showSubmitButton:false,
  showAdvancedButton: false,
  disabled: false,
})


function handleSubmit(values) {
  console.log(values)
}

function setDisabled(flag) {
  setProps({ disabled: !!flag })
}

function showUploadModal() {
  openModal(true, {
    maxCount: 9,
    fileType: UploadTypeEnum.image,
  })
}

</script>
